<template>
	<div>
		<van-button size="small" @click="checkCaptcha" :disabled="disabled || time > 0">{{text}}</van-button>
		<van-dialog v-model="showcaptcha" :before-close="send" >
			<van-field v-model="captcha"  placeholder="请输入验证码" clearable>
				<img slot="icon" v-bind:src="captchaImg" v-on:click="randCaptcha" >
			</van-field>
		</van-dialog>
	</div>
</template>
<script>
	import { Button,Field} from 'vant';

	export default{
		components :{
			[Button.name] : Button,
			[Field.name] : Field,
		},
		props: {
	        second: {
	            type: Number,
	            default: 60,
	        },
	        disabled: {
	            type: Boolean,
	            default: false,
	        },
	        phone: {
	            type: String,
	            required : true,
	        },
	        sendurl: {
	            type: String,
	            required : true,
	        },
	        cookiename:{
	            type: String,
	            required : true,
	        },
	        params:{
	        	type :Object,
	        }
	    },
	    data: function () {
	        return {
	            time: 0,
	            captchaImg :'',
	            captcha : '',
	            showcaptcha : false,
	        }
	    },
	    methods: {
	        run(bool) {
	            //防止重复验证,一个页面只允许一个正在倒计时的线程
	            if(this.time>0){
	                return false;
	            }
	            var cookieVue = this.cookie_get();
	            if(cookieVue!=null){
	                this.time = parseInt(cookieVue)  - (parseInt(new Date().getTime()/1000));
	                this.timer();
	            }else if(bool && this.time==0){
	            	this.sendAction();
	            }
	        },
	        //验证cookie,存在执行timer
	        checkRun(){
	        	var cookieVue = this.cookie_get();
	            if(cookieVue!=null){
	                this.time = parseInt(cookieVue)  - (parseInt(new Date().getTime()/1000));
	                this.timer();
	            }
	        },
	        timer(){
	            if (this.time > 0) {
	                this.time--;
	                setTimeout(this.timer, 1000);
	            }
	        },
	        send(action, done) {
	        	if(!this.checkPhone()){
	        		done(false);
	            	return false;
	            }
	            if(this.captcha== ''){
	            	this.$toast.fail('请填写图片验证码');done(false);return false;
	            }
	            this.run(true);
	            done();
	        },
	        //调用图片验证码
	        checkCaptcha(){
	        	if(this.checkPhone()){
	        		this.randCaptcha();
	        		this.showcaptcha = true;
	        		this.captcha = '';
	        	}
	        },
	        randCaptcha(){
	        	this.captchaImg = '/captcha?'+new Date().getTime();
	        },
	        cookie_set(value, seconds) {
	            var d = new Date;
	            d.setTime(d.getTime() + 1000*seconds);
	            window.document.cookie = this.cookiename + "=" + value + ";path=/;expires=" + d.toGMTString();
	        },
	        cookie_get() {
	            var v = window.document.cookie.match('(^|;) ?' + this.cookiename + '=([^;]*)(;|$)');
	            return v ? v[2] : null;
	        },
	        cookie_del() {
	            this.set(this.cookiename, '', -1);
	        },
	        //验证填写的手机号码
	        checkPhone(){
	        	if(this.phone==''){
	        		this.$toast.fail('请填写手机号');return false;
	            }
	            if(!(/^(139|138|137|136|135|134|147|150|151|152|157|158|159|178|182|183|184|187|188|130|131|132|155|156|185|186|145|176|133|153|177|173|180|181|189|170|171)\d{8}$/.test(this.phone))){
	            	this.$toast.fail('请填写格式正确的手机号');return false;
	            }
	            return true;
	        },
	        sendAction (){
	            this.Axios.SendPhoneCode(this.sendurl,Object.assign({phone:this.phone,captcha:this.captcha,path: this.$route.path},this.params))
		        .then(res =>{
		        	if(!res) return false;
		        	this.cookie_set(parseInt(new Date().getTime()/1000)+60,this.second);
	                this.time = this.second;
	                this.timer();
	                this.showcaptcha = false;
		        })
		        return true;
	        }
	    },
	    created:function(){
	    	this.checkRun();
	    },
	    computed: {
	        text: function () {
	            return this.time > 0 ? this.time + 's 后重新获取' : '获取验证码';
	        }
	    }
	}
</script>
<style>
	.captchaImg{width: 100%;}
</style>